<template>
  <div class="wrap-chemicals-info">
    <p class="wrap-info-title">化学品</p>
    <div class="Chemicals-chart" id="ChemicalsChart"></div>
    <div class="count-chart" id="CountChart"></div>
    <div class="count-chart-special" id="CountChartSpecial"></div>
  </div>
</template>

<script>
  /**
   * @name  柱状图表组件
   * @module 组件存放位置
   * @desc 组件描述
   * @author shitou
   * @date
   * @param {Object} [title]  - 参数说明
   * @param {String} [columns] - 参数说明
   */
  import axiosModel from '@/api'
  export default {
    name: '',
    components: {},
    props: {},
    data () {
      return {
        chart: null
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {
      this.getChemical()
      this.getData()
    },
    methods: {
      async getChemical () {
        const { data } = await axiosModel.buildingQueryController.getChemical()
        const { dataList } = data.rows
        const { controlStatistics, rklStatistics, wasteStatistics } = dataList
        let countData = {
          grade: ['库存总数', '管制总数'],
          grade1: ['废液总量'],
          cost1: [Number(rklStatistics ? rklStatistics.solvent.split('.')[0] : 0), Number(controlStatistics ? controlStatistics.solvent.split('.')[0] : 0)],
          cost2: [Number(rklStatistics ? rklStatistics.sold.split('.')[0] : 0), Number(controlStatistics ? controlStatistics.sold.split('.')[0] : 0)],
          cost3: [Number(wasteStatistics ? wasteStatistics.split('m')[0] : 0)]
        }
        this.initCountChart(countData)
        this.initSpecialChart(countData)
      },
      async getData () {
        const { data } = await axiosModel.buildingQueryController.getPurchase()
        const { gmsStatistics } = data.rows.dataList
        this.initChart(gmsStatistics)
      },
      initChart (chartData) {
        let dataset
        let dateArr = chartData.map(item => {
          return item.product
        })
        let dataMs = chartData.map(item => {
          return item.固体 || 0
        })
        let dataXs = chartData.map(item => {
          return item.液体 || 0
        })
        dataset = [
          {
            name: '液体（m³）',
            stack: '化学品',
            type: 'bar',
            data: dataMs,
            barWidth: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(29,225,254,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(29,225,254,0.2)'
                  }
                ])
              }
            }
          },
          {
            name: '固体（吨）',
            stack: '化学品',
            type: 'bar',
            data: dataXs,
            barWidth: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(45,253,157,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(45,253,157,0.2)'
                  }
                ])
              }
            }
          }
        ]
        let option = {
          title: {
            text: '购买总数',
            textStyle: {
              align: 'center',
              color: '#fff',
              fontSize: 12
            },
            top: '8%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 13,
            right: '4%',
            top: 15,
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: dateArr,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  corlor: '#fff',
                  fontSize: 12
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: dataset
        }
        let charts
        if (document.getElementById('ChemicalsChart')) {
          charts = this.$echarts.init(document.getElementById('ChemicalsChart'))
          charts.setOption(option)
        }
        window.addEventListener('resize', () => {
          if (charts) {
            charts.resize()
          }
        })
      },
      initCountChart (data) {
        let option = {
          grid: {
            left: '22%',
            right: '20%',
            bottom: '5%',
            top: '10%'
          },
          tooltip: {
            show: 'true',
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.7)', // 背景
            padding: [8, 10], //内边距
            extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            formatter: function (params) {
              if (params.seriesIndex !== 0 && params.seriesIndex !== 1) {
                return params.name + '<br>' + params.seriesName + ' ：  ' + params.value + (params.seriesName === '固体' ? '吨' : 'm³')
              }
            }
          },
          xAxis: {
            show: false
          },
          yAxis: [
            {
              inverse: true,
              type: 'category',
              axisLabel: {
                show: true,
                color: '#fff',
                fontSize: 12
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.grade
            },
            {
              inverse: true,
              type: 'category',
              axisLabel: {
                show: false,
                color: '#666',
                fontSize: 12,
                padding: [0, 20, 0, 0]
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.grade
            }
          ],
          series: [
            {
              type: 'bar',
              barGap: '-100%',
              barWidth: '7',
              z: 1,
              yAxisIndex: 1,
              data: [data.cost1[0] + data.cost1[1], data.cost1[0] + data.cost1[1]],
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#fff',
                  fontSize: 12,
                  offset: [0, 0],
                  formatter: function (param) {
                    return data.cost1[param.dataIndex] + '吨'
                  }
                }
              },
              itemStyle: {
                emphasis: {
                  color: 'eee'
                },
                normal: {
                  barBorderRadius: 16,
                  color: 'rgba(216,216,216,0.15)'
                }
              }
            },
            {
              type: 'bar',
              barGap: '-300%',
              barWidth: '7',
              z: 1,
              yAxisIndex: 1,
              data: [data.cost1[0] + data.cost1[1], data.cost1[0] + data.cost1[1]],
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#fff',
                  fontSize: 12,
                  offset: [0, 0],
                  formatter: function (param) {
                    return data.cost2[param.dataIndex] + 'm³'
                  }
                }
              },
              itemStyle: {
                emphasis: {
                  color: 'eee'
                },
                normal: {
                  barBorderRadius: 16,
                  color: 'rgba(216,216,216,0.15)'
                }
              }
            },
            {
              name: '固体',
              type: 'bar',
              barGap: '-100%',
              barWidth: '7',
              z: 2,
              data: data.cost1,
              itemStyle: {
                normal: {
                  barBorderRadius: 16,
                  color: param => {
                    return param.name === '库存总数' ? '#1DE1FE' : param.name === '管制总数' ? '#FF8F00' : ''
                  }
                }
              },
              max: 1
            },
            {
              name: '液体',
              type: 'bar',
              barGap: '-300%',
              barWidth: '7',
              z: 2,
              data: data.cost2,
              itemStyle: {
                normal: {
                  barBorderRadius: 16,
                  color: param => {
                    return param.name === '库存总数' ? '#2DFD9D' : param.name === '管制总数' ? '#FFE300' : ''
                  }
                }
              },
              max: 1
            }
          ]
        }
        let charts
        if (document.getElementById('CountChart')) {
          charts = this.$echarts.init(document.getElementById('CountChart'))
          charts.setOption(option)
        }
        window.addEventListener('resize', () => {
          if (charts) {
            charts.resize()
          }
        })
      },
      initSpecialChart (data) {
        let option = {
          grid: {
            left: '22%',
            right: '20%',
            bottom: '5%',
            top: '0'
          },
          tooltip: {
            show: 'true',
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.7)', // 背景
            padding: [8, 10], //内边距
            extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            formatter: function (params) {
              if (params.seriesIndex !== 0) {
                return params.name + '<br>' + params.seriesName + ' ：  ' + params.value + (params.seriesName === '固体' ? '吨' : 'm³')
              }
            }
          },
          xAxis: {
            show: false
          },
          yAxis: [
            {
              inverse: true,
              type: 'category',
              axisLabel: {
                show: true,
                color: '#fff',
                fontSize: 12
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.grade1
            },
            {
              inverse: true,
              type: 'category',
              axisLabel: {
                show: false,
                color: '#666',
                fontSize: 12,
                padding: [0, 20, 0, 0]
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              data: data.grade1
            }
          ],
          series: [
            {
              type: 'bar',
              barGap: '-100%',
              barWidth: '10',
              z: 1,
              data: [data.cost1[0] + data.cost1[1]],
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  color: '#fff',
                  fontSize: 12,
                  offset: [0, 0],
                  formatter: function (param) {
                    return data.cost3[param.dataIndex] + 'm³'
                  }
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 12,
                  color: 'rgba(216,216,216,0.15)'
                }
              }
            },
            {
              name: '液体',
              type: 'bar',
              barWidth: '10',
              z: 2,
              data: data.cost3,
              itemStyle: {
                normal: {
                  barBorderRadius: 16,
                  color: 'rgba(29,225,254,1)'
                }
              },
              max: 1
            }
          ]
        }
        let charts
        if (document.getElementById('CountChartSpecial')) {
          charts = this.$echarts.init(document.getElementById('CountChartSpecial'))
          charts.setOption(option)
        }
        window.addEventListener('resize', () => {
          if (charts) {
            charts.resize()
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .wrap-chemicals-info {
    z-index: 4;
    position: relative;
    height: 50%;
    .wrap-info-title {
      font-size: 22px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 60px;
    }
    .Chemicals-chart {
      height: 45%;
      width: 100%;
    }
    .count-chart {
      height: 25%;
      width: 100%;
    }
    .count-chart-special {
      margin-top: -10px;
      height: 10%;
      width: 100%;
    }
  }

  @media screen and (max-height: 860px) {
    .wrap-info-title {
      font-size: 18px !important;
      line-height: 2 !important;
    }
    .Chemicals-chart {
      height: 55% !important;
    }
  }
</style>
